<template>
    <div>
        <h1>我是详情页</h1>
        <button @click="router.back()">返回</button>
        <div class="reg">Reg</div>
        <!-- <div>品牌：{{ route.query.name }}</div>
        <div>价格：{{ route.query.price }}</div>
        <div>ID：{{ route.query.id }}</div> -->


        <!-- <div>品牌：{{ route.params.name }}</div>
        <div>价格：{{ route.params.price }}</div>
        <div>ID：{{ route.params.id }}</div> -->

        <!-- ?问号是判断是否为空，如果不为空则使用 -->
        <div>品牌：{{ item?.name }}</div>
        <div>价格：{{ item?.price }}</div>
        <div>ID：{{ item?.id }}</div>
    </div>
</template>


<script setup lang="ts">
import {data} from './list.json'
import { useRoute, useRouter } from 'vue-router';
const route = useRoute()
const router = useRouter()

// 1：query 2. params
// 第三种方式
// 匹配数组里面满足条件的第一个值
// find 是数组的通用方法
const item = data.find(v => v.id === Number(route.params.id))

// query 传参配置的是 path，而 params 传参配置的是name，在 params中配置 path 无效

// query 在路由配置不需要设置参数，而 params 必须设置

// query 传递的参数会显示在地址栏中

// params传参刷新会无效，但是 query 会保存传递过来的值，刷新不变 ;

</script>

<style>
    .reg {
        background-color: red;
        height: 400px;
        width: 400px;
        font-size: 20px;
        color: white;
    }
</style>